<template>
	<view class="get_phone">
		<view class="uni-form-item uni-column">
			<text class="phone-icon iconfont " :class="{'icon-shouji': !done, 'icon-icon_verification': done}"></text>
			<input class="uni-input" type="number" v-model="phone" v-if="!done" maxlength="11"  focus placeholder="请输入手机号码" />
			<input class="uni-input" type="number" v-model="code" v-if="done" maxlength="4" placeholder="请输入验证码" focus  />
			<button :class="{'sub_btn':!isRight}" v-if="!done" :disabled="isRight" @click="sendCode">发送验证码</button>
			<button :class="{'sub_btn':!isCode}" v-if="done" :disabled="isCode" @click="subCode">验证</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRight: true,
				isCode: true,
				done: false,
				phone: "",
				code: "",
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo 
			},
			sid() {
				return this.$store.state.sid 
			}
		},
		watch: {
			phone() {
				this.isMatch()
			},
			code() {
				let reg = /^\d{4}$/
				let ret = reg.test(this.code)
				if(ret) {
					this.isCode = false
				} else {
					this.isCode = true
				}
			}
		},

		methods: {
			// 验证手机号码
			isMatch() {
				let reg = /^1[356789]\d{9}$/
				let rel = reg.test(this.phone)
				//console.log(this.phone);
				if(rel) {
					this.isRight = false
				} else {
					this.isRight =  true
				}
			},
			// 发送验证码
			sendCode() {
				let self = this
				uni.request({
					url: `${self.$Request_Url}/Index/sendcode`,
					method: "POST",
					data: {
						phone: self.phone
					},
					success(res) {
						console.log(res);
						if(res.data.code) {
							self.done = true
						}
					}
				})
			},
			
			// 检验验证码
			subCode() {
				let self = this
				//console.log(this.code);
				let data = {
						code:self.code,
						phone: self.phone,
						openid: self.sid.openid,
						session_key: self.sid.session_key,
						wnickname: self.userInfo.nickName,
						headimgurl: self.userInfo.avatarUrl
				}
				if(this.userInfo.fid) {
					data.fid = this.userInfo.fid
				}
				uni.request({
					url:`${self.$Request_Url}/Index/userinfo`,
					method:"POST",
					data: data,
					success( res ) {
						if(res.data.code == 202 || res.data.data) {
							self.$store.commit("getUserToken", res.data.data)
							uni.setStorage({
								key: "miniToken",
								data: res.data.data
							})
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.get_phone {
		width: 100%;
		box-sizing: border-box;
		padding-top: 40%;
		.uni-form-item {
			width: 80%;
			margin: 0 auto;
			text-align: center;
			.uni-input {
				margin: 30rpx 0;
				height: 80rpx;
				border: 1px solid #007AFF;
				padding: 0 20rpx;
			}
		}
		.phone-icon {
			font-size: 200rpx;
			color: #007AFF;
		}
		.sub_btn {
			background-color: #007AFF;
			color: #fff;
		}
	}
</style>
